<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
    >
      <span>这是简历</span>
      <!-- 1. 引入pdf的地址 展示第一页-->
      <!-- <pdf src="./w.pdf" :page="2"></pdf> -->

      <!-- 3. 展示所有页面 -->
      <!-- <pdf
        v-for="i in numPages"
        :key="i"
        :src="src"
        :page="i"
        style="display: inline-block; width: 25%"
      ></pdf> -->

      <!-- 4. 分页显示 -->
      <pdf :src="src" :page="num" />
      <!-- 插入分页器 -->
      <Pagination
        :total="total"
        :pageSize="pageSize"
        @changeCurrent="changeCurrent"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pdf from "vue-pdf";
import Pagination from "../../components/Pagination/Pagination";
var loadingTask = pdf.createLoadingTask("./w.pdf");
export default {
  components: { pdf, Pagination },
  data() {
    return {
      title: "查看简历",
      dialogVisible: false,
      //   currentPage: 0,
      //   pageCount: 0,
      src: loadingTask,
      numPages: undefined,
      pageSize: 1,
      total: 10,
      num: 1,
    };
  },
  methods: {
    handleClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    changeCurrent(val) {
      //   console.log(val);
      this.num = val;
    },
  },
  mounted() {
    this.src.promise.then((pdf) => {
      this.numPages = pdf.numPages;
      this.total = pdf.numPages;
    });
  },
};
</script>

<style lang="less" scoped>
</style>